<template>
	<div id="app" style="background-color: #fff;">
	
	 <div class="box">
		
			<div class="wechat" v-bind:class="is_max == true ? 'max_box am-animation-scale-up' :'am-animation-scale-down'">
				
				<div class="sidestrip">
					<div class="am-dropdown" data-am-dropdown>
						<!--头像插件-->
						<div class="own_head am-dropdown-toggle"></div>
						<!-- <div class="am-dropdown-content">
							<div class="own_head_top">
								<div class="own_head_top_text">
									<p class="own_name">彭于晏丶plus<img src="./assets/images/icon/head.png" alt="" /></p>
									<p class="own_numb">微信号：123456</p>
								</div>
								<img src="./assets/images/own_head.jpg" alt="" />
							</div>
							<div class="own_head_bottom">
								<p><span>地区</span>江西 九江</p>
								<div class="own_head_bottom_img">
									<a href=""><img src="./assets/images/icon/head_1.png"/></a>
									<a href=""><img src="./assets/images/icon/head_2.png"/></a>
								</div>
							</div>
						</div> -->
					</div>
					<!--三图标-->
					<div class="sidestrip_icon">
						<a id="si_1" @click="icon_active = 1" v-bind:class="icon_active == 1 ? 'active' :'' "></a>
						<a id="si_2" @click="icon_active = 2" v-bind:class="icon_active == 2 ? 'active2' :'' "></a>
						<a id="si_3" @click="icon_active = 3" v-bind:class="icon_active == 3 ? 'active3' :'' "></a>
					</div>
					
					<!--底部扩展键-->
					<div id="doc-dropdown-justify-js">
						<div class="am-dropdown" @click="is_alert_left = !is_alert_left" id="doc-dropdown-js" style="position: initial;">
							<div class="sidestrip_bc am-dropdown-toggle"></div>
							<transition name="fade">
								<ul class="am-dropdown-content" v-if="is_alert_left">
									<li>
										<a href="#" @click="is_message = !is_message" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
										<transition name="fade">
											<div class="am-modal am-modal-no-btn " v-bind:class="is_message ? 'am-modal-active' : '' " tabindex="-1" id="doc-modal-1">
											  <div class="am-modal-dialog">
												<div class="am-modal-hd">Modal 标题
												  <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
												</div>
												<div class="am-modal-bd">
												  Modal 内容。本 Modal 无法通过遮罩层关闭。
												</div>
											  </div>
											</div>
										</transition>
									</li>
									
									<li><a href="#">备份与恢复</a></li>
									<li><a href="#">设置</a></li>
								</ul>
							</transition>
						</div>	
					</div>	
				</div>
				
				<!--聊天列表-->
				
				<div class="middle on" v-if="icon_active == 1">
					<div class="wx_search">
						<input type="text" placeholder="搜索"/>
						<button>+</button>
					</div>
					<div class="office_text">
						
							<ul class="user_list">
								<li v-bind:class="active == index ? 'user_active' :'' " v-for="(item,index) in group_list" :key="index">
									<div class="user_head"><img :src="item.avatar"/></div>
									<div class="user_text">
										<p class="user_name">{{item.user_name}}</p>
										<p class="user_message">{{item.user_message}}</p>
									</div>
									<div class="user_time">{{item.user_time}}</div>
								</li>
								
							</ul>
						
						
					</div>	
				</div>
				
				
				<!--好友列表-->
				
				<div class="middle on" v-else-if="icon_active == 2">
					<div class="wx_search">
						<input type="text" placeholder="搜索"/>
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="friends_list">
							<li>
								<p>新的朋友</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/1.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">新的朋友</p>
									</div>
								</div>
							</li>
							<li>
								<p>公众号</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/2.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">公众号</p>
									</div>
								</div>
							</li>
							<li>
								<p>A</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/3.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">彭于晏丶plus</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/4.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">陈依依</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/5.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">毛毛</p>
									</div>
								</div>
							</li>
							<li>
								<p>B</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/6.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">苏笑言</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/7.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">往事不再提</p>
									</div>
								</div>
							</li>
							<li>
								<p>C</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/8.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">夏继涛</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/9.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">早安无恙</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/10.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">王鹏</p>
									</div>
								</div>
							</li>
							<li>
								<p>D</p>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/11.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">涨了潮了</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="./assets/images/head/12.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">Ktz丶中融资</p>
									</div>
								</div>
							</li>
						</ul>
					</div>	
				</div>
				
				<!--程序列表-->
				<div class="middle on" v-else>
					<div class="wx_search">
						<input type="text" placeholder="搜索收藏内容"/>
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="icon_list">
							<li class="icon_active">
								<div class="icon"><img src="./assets/images/icon/icon.png" alt="" /></div>
								<span>全部收藏</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon1.png" alt="" /></div>
								<span>链接</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon2.png" alt="" /></div>
								<span>相册</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon3.png" alt="" /></div>
								<span>笔记</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon4.png" alt="" /></div>
								<span>文件</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon5.png" alt="" /></div>
								<span>音乐</span>
							</li>
							<li>
								<div class="icon"><img src="./assets/images/icon/icon6.png" alt="" /></div>
								<span>标签</span>
							</li>
						</ul>
					</div>	
				</div>
					
				<!--聊天窗口-->
                <TalkWindow @talk_event="talk_event"></TalkWindow>
			
			</div>
		
	</div>
	</div>
	
</template>

<script>
import TalkWindow from './components/TalkWindow';
export default {
  name: 'App',
  components:{
	  TalkWindow
  },
  data(){
	  return{
		  is_message:false,
		  is_max:false,
		  is_alert_left:false,
		  icon_active:1,
		  active: 0,
		  group_list:[
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54',
							 
			  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
										  'avatar':require('./assets/images/head/2.jpg'),
										  'user_name':'张三',
										  'user_message':'[小程序]',
										  'user_time':'下午 2：54'
						  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
							  'avatar':'./assets/images/head/2.jpg',
							  'user_name':'张三',
							  'user_message':'[小程序]',
							  'user_time':'下午 2：54'
			  },
			  {
			  							  'avatar':'./assets/images/head/2.jpg',
			  							  'user_name':'张三',
			  							  'user_message':'[小程序]',
			  							  'user_time':'下午 2：54'
			  },
			  {
			  							  'avatar':'./assets/images/head/2.jpg',
			  							  'user_name':'张三',
			  							  'user_message':'[小程序]',
			  							  'user_time':'下午 2：54'
			  }
			 
		  ],
		   }
  },
  watch:{
     
  },
  methods:{
	  talk_event:function(data){
		  
		  this.is_max = data
	  }
  }
}
</script>

<style scoped>

/* 三图标 */
.sidestrip_icon >.active{ 
		background: url(./assets/images/icon/head_2_1.png) no-repeat !important;
}
.sidestrip_icon >.active2{ 
		background: url(./assets/images/icon/head_3_1.png) no-repeat !important;
}
.sidestrip_icon >.active3{ 
		background: url(./assets/images/icon/head_4_1.png) no-repeat !important;
}


</style>